const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const CopyPlugin = require("copy-webpack-plugin");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = {

	// 输出
	output: {
		publicPath: "/",
		filename: "js/[name].[hash:8].js",
		chunkFilename: "js/[name].[chunkhash:8].js"
	},

	// 模块配置
	module: {
		// 规则
		rules: [

			// 处理js
			{
				test: /\.js$/,
				exclude: /(node_modules|bower_components)/,
				use: "babel-loader"
			},

			// vue 
			{
				test: /\.vue$/,
				use: "vue-loader"
			},

			// 处理图片
			{
				test: /\.(png|jpg|jpeg|gif)$/,
				use: [
					{
						loader: "file-loader",
						options: {
							outputPath: "imgs",
							name: "[name].[ext]"
						}
					}
				]
			},

			// 处理字体
			{
				test: /\.(ttf|woff|woff2|eot)$/,
				use: [
					{
						loader: "file-loader",
						options: {
							outputPath: "fonts",
							name: "[name].[ext]"
						}
					}
				]
			},

			// 处理css
			{
				test: /\.s?css$/,
				use: [
					process.env.NODE_ENV !== "production" ? "vue-style-loader" : MiniCssExtractPlugin.loader,
					"css-loader",
					"postcss-loader"
				]
			}
		]
	},

	// 解析
	resolve: {

		// 自动解析确定的扩展
		extensions: [".js", ".json", ".vue"],

		// 别名
		alias: {
			"@": path.resolve(__dirname, "./src")
		}
	},

	// 插件
	plugins: [
		new HtmlWebpackPlugin({
			template: "./public/index.html",
			favicon: "./public/favicon.ico"
		}),

		// vue-loader
		new VueLoaderPlugin(),

		// 打包css
		new MiniCssExtractPlugin({
			filename: "css/style.[chunkhash:8].css"
		}),

		// 代码分析
		/* new BundleAnalyzerPlugin({
			analyzerMode: "static"
		}), */

		// 静态资源复制
		new CopyPlugin([
			{
				from: path.resolve(__dirname, "./src/static"),
				to: "static"
			}
		]),
	],

	// 开发配置
	devServer: {
		// 默认localhost,设置为0.0.0.0可以在外部访问
		host: "0.0.0.0",

		historyApiFallback: true
	}
}